<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
        <link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css"/>
		<title>复旦大学EMBA</title>
	</head>
	<body class="grey">
		
        <div class="page">

            <div class="head-box flex">
                <img class="logo" src="img/logo_icon.png" alt="">
                <div class="head-box-btn flex">
                    <i class="iconfont icon-sousuo search"></i>
                    <i class="iconfont icon-caidan menu"></i>
                </div>
            </div>

            <div class="menu-nav-box">
                <div class="menu-nav-item">
                    <div class="flex items-center">
                        <i class="iconfont icon-shouye"></i>
                        <p>首页</p>
                    </div>
                </div>
                <div class="menu-nav-item onthis">
                    <div class="flex items-center">
                        <i class="iconfont icon-shenqing"></i>
                        <p>申请</p>
                    </div>
                </div>
                <div class="menu-nav-item">
                    <div class="flex items-center">
                        <i class="iconfont icon-kecheng"></i>
                        <p>课程</p>
                    </div>
                </div>
                <div class="menu-nav-item">
                    <div class="flex items-center">
                        <i class="iconfont icon-jiaoshi"></i>
                        <p>师资</p>
                    </div>
                </div>
                <div class="menu-nav-item">
                    <div class="flex items-center">
                        <i class="iconfont icon-renqun"></i>
                        <p>校友</p>
                    </div>
                </div>
                <div class="menu-nav-item">
                    <div class="flex items-center">
                        <i class="iconfont icon-gongwenbao"></i>
                        <p>活动</p>
                    </div>
                </div>
                <div class="menu-nav-item">
                    <div class="flex items-center">
                        <i class="iconfont icon-zixun"></i>
                        <p>资讯</p>
                    </div>
                </div>
            </div>

            <div class="swiper-container" id="banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="banner"><img src="img/banner_friends_elite.jpg" width="100%" alt="" /></div></div>
                    <div class="swiper-slide"><div class="banner"><img src="img/banner_friends_elite.jpg" width="100%" alt="" /></div></div>
                    <div class="swiper-slide"><div class="banner"><img src="img/banner_friends_elite.jpg" width="100%" alt="" /></div></div>
                    <div class="swiper-slide"><div class="banner"><img src="img/banner_friends_elite.jpg" width="100%" alt="" /></div></div>
                </div>
                <div class="swiper-pagination" id="banner_swp"></div>
            </div>

            <div class="elite-nav-box">
                <div class="elite-nav-cont">
                    <div class="elite-nav-box-item onthis"><p>E一代</p></div>
                    <div class="elite-nav-box-item"><p>复二代</p></div>
                    <div class="elite-nav-box-item"><p>女性精英领导者</p></div>
                    <div class="elite-nav-box-item"><p>栏目名称</p></div>
                </div>
            </div>

            <div class="content elite">
                <div class="friends-elite-list">
                    <div class="friends-elite-article flex items-center">
                        <img src="img/news_demo_img4.jpg" alt="">
                        <div class="friends-elite-article-info">
                            <h1>创E代｜对话中南集团创始人陈锦石:房地产业到了后半场</h1>
                            <p>2018年10月26日  10:00</p>
                        </div>
                    </div>
                    <div class="friends-elite-article flex items-center">
                        <img src="img/news_demo_img4.jpg" alt="">
                        <div class="friends-elite-article-info">
                            <h1>创E代｜对话中南集团创始人陈锦石:房地产业到了后半场</h1>
                            <p>2018年10月26日  10:00</p>
                        </div>
                    </div>
                    <div class="friends-elite-article flex items-center">
                        <img src="img/news_demo_img4.jpg" alt="">
                        <div class="friends-elite-article-info">
                            <h1>创E代｜对话中南集团创始人陈锦石:房地产业到了后半场</h1>
                            <p>2018年10月26日  10:00</p>
                        </div>
                    </div>
                    <div class="friends-elite-article flex items-center">
                        <img src="img/news_demo_img4.jpg" alt="">
                        <div class="friends-elite-article-info">
                            <h1>创E代｜对话中南集团创始人陈锦石:房地产业到了后半场</h1>
                            <p>2018年10月26日  10:00</p>
                        </div>
                    </div>
                </div>
                <div class="title-box flex items-center" style="padding: .54rem 0 .34rem;">
                    <i class="iconfont icon-jingyinghui"></i>
                    <span>在读学生封面人物</span>
                </div>
                <div class="picture-swiper-box elite">
                    <div class="swiper-container picture" id="picture">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="img/friends_picture_demo1.jpg" width="100%" alt="" />
                            </div>
                            <div class="swiper-slide">
                                <img src="img/friends_picture_demo2.jpg" width="100%" alt="" />
                            </div>
                            <div class="swiper-slide">
                                <img src="img/friends_picture_demo3.jpg" width="100%" alt="" />
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev" id="picture_prev"></div>
                    <div class="swiper-button-next" id="picture_next"></div>
                </div>
                <div class="friends-picture-info flex">中南集团创始人陈锦石</div>
            </div>

            <!--<div class="float-box">-->
                <!--<div class="float-box-item">-->
                    <!--<i class="iconfont icon-kefu"></i>-->
                    <!--<p>咨询</p>-->
                <!--</div>-->
                <!--<div class="float-box-item">-->
                    <!--<i class="iconfont icon-baoming"></i>-->
                    <!--<p>报名</p>-->
                <!--</div>-->
                <!--<div class="float-box-item">-->
                    <!--<i class="iconfont icon-dianhua"></i>-->
                    <!--<p>致电</p>-->
                <!--</div>-->
            <!--</div>-->

            <div class="bottom-box">
                <div class="bottom-add-box flex">
                    <div>
                        <i class="iconfont icon-dizhi"></i>
                        <p>上海市国顺路670号<br />管理学院史带楼708室</p>
                    </div>
                    <div>
                        <i class="iconfont icon-dianhua"></i>
                        <p>021-25011500</p>
                    </div>
                    <div>
                        <i class="iconfont icon-youjian"></i>
                        <p>emba@fudan.edu.cn</p>
                    </div>
                </div>
                <div class="bottom flex">
                    <div class="flex">
                        <img src="img/bottom_logo.png" alt="">
                        <p>Copyright2017©复旦大学管理学院<br />沪ICP备16018209号-1</p>
                    </div>
                </div>
            </div>

        </div>
		
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('.menu').click(function (e) {
                $('.menu-nav-box').toggle();
            });

            $('.search').click(function (e) {
                window.location.href = 'search.html';
            });

            var mySwiper = new Swiper ('#banner', {
                pagination: {
                    el: '#banner_swp',
                },
            });

            var eliteList = ['中南集团创始人陈锦石1','中南集团创始人陈锦石2','中南集团创始人陈锦石3'];
            var mySwiperPic = new Swiper ('#picture', {
                slidesPerView: 3,
                centeredSlides: true,
                spaceBetween: '-40%',
                navigation: {
                    nextEl: '#picture_next',
                    prevEl: '#picture_prev',
                },
                on: {
                    slideChangeTransitionEnd: function(){
                        $('.friends-picture-info').html(eliteList[this.activeIndex]);
                    },
                },
            });

            $(document).ready(function (e) {
                var contWidth = 0;
                for (var i=0;i<$('.elite-nav-box-item').length;i++){
                    contWidth += $('.elite-nav-box-item').eq(i).innerWidth();
                    console.log(contWidth);
                }
                $('.elite-nav-cont').width(contWidth);
            });
            
            $('.elite-nav-box-item').click(function (e) {
                $('.elite-nav-box-item').removeClass('onthis');
                $(this).addClass('onthis');
            });
        </script>
	</body>
</html>
